<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农场 - 精选优质商品</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        // Tailwind配置
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.03);
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full bg-white/95 shadow-md z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <!-- 品牌标识 -->
            <a href="#" class="flex items-center space-x-2">
                <i class="fa fa-shopping-bag text-primary text-2xl"></i>
                <span class="text-xl font-bold text-dark">农场</span>
            </a>
            
            <!-- 搜索栏 - 中等屏幕以上显示 -->
            <div class="hidden md:flex items-center flex-1 max-w-md mx-8">
                <input type="text" id="search-input" placeholder="搜索商品..." 
                    class="w-full px-4 py-2 rounded-l-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                <button id="search-btn" class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-primary/90 transition-colors">
                    <i class="fa fa-search"></i>
                </button>
            </div>
            
            <!-- 导航菜单 -->
            <nav class="flex items-center space-x-6">
                <a href="#" class="hidden md:block text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-home mr-1"></i> 首页
                </a>
                <a href="#" class="hidden md:block text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-th-list mr-1"></i> 分类
                </a>
                <div class="relative">
                    <button id="cart-btn" class="text-gray-600 hover:text-primary transition-colors relative">
                        <i class="fa fa-shopping-cart text-xl"></i>
                        <span id="cart-count" class="absolute -top-2 -right-2 bg-accent text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
                    </button>
                </div>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-user text-xl"></i>
                </a>
                <!-- 移动端菜单按钮 -->
                <button id="mobile-menu-btn" class="md:hidden text-gray-600">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </nav>
        </div>
        
        <!-- 移动端搜索栏 -->
        <div class="md:hidden px-4 pb-3">
            <div class="flex items-center">
                <input type="text" placeholder="搜索商品..." 
                    class="w-full px-4 py-2 rounded-l-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                <button class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-primary/90 transition-colors">
                    <i class="fa fa-search"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white border-t">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#" class="py-2 text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-home mr-2"></i> 首页
                </a>
                <a href="#" class="py-2 text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-th-list mr-2"></i> 分类
                </a>
                <a href="#" class="py-2 text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-heart mr-2"></i> 收藏
                </a>
                <a href="#" class="py-2 text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-history mr-2"></i> 历史
                </a>
            </div>
        </div>
    </header>

    <!-- 主横幅 -->
    <section class="pt-24 md:pt-0 bg-gradient-to-r from-primary/90 to-primary py-16 md:py-24">
        <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 text-white mb-8 md:mb-0">
                <h1 class="text-3xl md:text-5xl font-bold mb-4 leading-tight">
                    夏日特惠<br>精选商品低至5折
                </h1>
                <p class="text-lg md:text-xl mb-6 text-white/90">
                    限时抢购，数量有限，先到先得！
                </p>
                <button class="bg-white text-primary font-medium px-6 py-3 rounded-lg hover:bg-gray-100 transition-colors shadow-lg">
                    立即抢购
                </button>
            </div>
            <div class="md:w-1/2 flex justify-center">
                <img src="https://picsum.photos/seed/sale/600/400" alt="夏日特惠商品展示" class="rounded-lg shadow-2xl max-w-full h-auto">
            </div>
        </div>
    </section>

    <!-- 分类导航 -->
    <section class="py-8 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-2xl font-bold mb-6 text-center">商品分类</h2>
            <div class="grid grid-cols-4 md:grid-cols-8 gap-4">
                <a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100 transition-colors">
                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-2">
                        <i class="fa fa-laptop text-primary text-xl"></i>
                    </div>
                    <span class="text-sm">电子产品</span>
                </a>
                <a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100 transition-colors">
                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-2">
                        <i class="fa fa-tshirt text-primary text-xl"></i>
                    </div>
                    <span class="text-sm">服装</span>
                </a>
                <a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100 transition-colors">
                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-2">
                        <i class="fa fa-home text-primary text-xl"></i>
                    </div>
                    <span class="text-sm">家居</span>
                </a>
                <a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100 transition-colors">
                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-2">
                        <i class="fa fa-book text-primary text-xl"></i>
                    </div>
                    <span class="text-sm">图书</span>
                </a>
                <a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100 transition-colors">
                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-2">
                        <i class="fa fa-gamepad text-primary text-xl"></i>
                    </div>
                    <span class="text-sm">游戏</span>
                </a>
                <a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100 transition-colors">
                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-2">
                        <i class="fa fa-sports text-primary text-xl"></i>
                    </div>
                    <span class="text-sm">运动</span>
                </a>
                <a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100 transition-colors">
                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-2">
                        <i class="fa fa-gift text-primary text-xl"></i>
                    </div>
                    <span class="text-sm">礼品</span>
                </a>
                <a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100 transition-colors">
                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-2">
                        <i class="fa fa-ellipsis-h text-primary text-xl"></i>
                    </div>
                    <span class="text-sm">更多</span>
                </a>
            </div>
        </div>
    </section>

    <!-- 精选商品 -->
    <section class="py-12 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center mb-8">
                <h2 class="text-2xl font-bold">精选商品</h2>
                <a href="#" class="text-primary hover:text-primary/80 flex items-center">
                    查看全部 <i class="fa fa-arrow-right ml-1"></i>
                </a>
            </div>
            
            <div id="products-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                <!-- 商品将通过JavaScript动态加载 -->
            </div>
            
            <div class="mt-10 text-center">
                <button id="load-more" class="bg-white border border-primary text-primary px-6 py-3 rounded-lg hover:bg-primary/5 transition-colors">
                    加载更多商品
                </button>
            </div>
        </div>
    </section>

    <!-- 购物车侧边栏 -->
    <div id="cart-sidebar" class="fixed top-0 right-0 h-full w-full sm:w-96 bg-white shadow-2xl transform translate-x-full transition-transform duration-300 z-50">
        <div class="flex flex-col h-full">
            <div class="p-4 border-b flex justify-between items-center">
                <h3 class="text-xl font-bold">购物车</h3>
                <button id="close-cart" class="text-gray-500 hover:text-gray-800">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <div id="cart-items" class="flex-1 overflow-y-auto p-4">
                <!-- 购物车为空状态 -->
                <div id="empty-cart" class="h-full flex flex-col items-center justify-center text-gray-500">
                    <i class="fa fa-shopping-cart text-5xl mb-4"></i>
                    <p class="text-lg">您的购物车是空的</p>
                    <p class="text-sm mt-2">添加一些商品吧！</p>
                </div>
                
                <!-- 购物车商品将通过JavaScript动态加载 -->
            </div>
            
            <div class="p-4 border-t bg-gray-50">
                <div class="flex justify-between mb-4">
                    <span class="font-medium">总计:</span>
                    <span id="cart-total" class="font-bold text-lg">¥0.00</span>
                </div>
                <button id="checkout-btn" class="w-full bg-primary text-white font-medium py-3 rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    结算
                </button>
            </div>
        </div>
    </div>
    
    <!-- 遮罩层 -->
    <div id="overlay" class="fixed inset-0 bg-black/50 z-40 hidden transition-opacity duration-300"></div>

    <!-- 商品详情模态框 -->
    <div id="product-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black/50" id="modal-overlay"></div>
        <div class="bg-white rounded-lg shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto relative z-10 transform transition-all">
            <button id="close-modal" class="absolute top-4 right-4 bg-white/80 rounded-full w-8 h-8 flex items-center justify-center shadow-md z-20">
                <i class="fa fa-times"></i>
            </button>
            <div id="modal-content" class="p-4 md:p-6">
                <!-- 商品详情内容将通过JavaScript动态加载 -->
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white pt-12 pb-6">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <h4 class="text-lg font-bold mb-4">农场</h4>
                    <p class="text-gray-400 mb-4">提供优质商品和卓越购物体验</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weixin"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">快速链接</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">全部商品</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">特惠活动</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">客户服务</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">配送信息</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">退换政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">订阅通讯</h4>
                    <p class="text-gray-400 mb-4">订阅我们的通讯，获取最新优惠信息</p>
                    <div class="flex">
                        <input type="email" placeholder="您的邮箱地址" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-gray-800">
                        <button class="bg-primary hover:bg-primary/90 transition-colors px-4 py-2 rounded-r-lg">
                            <i class="fa fa-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-700 pt-6 text-center text-gray-500 text-sm">
                <p>© 2023 农场 版权所有 | 隐私政策 | 使用条款</p>
            </div>
        </div>
    </footer>

    <script>
        // 全局状态管理
        const state = {
            products: [],
            cart: [],
            currentPage: 1,
            itemsPerPage: 8
        };

        // DOM 元素
        const elements = {
            productsContainer: document.getElementById('products-container'),
            cartBtn: document.getElementById('cart-btn'),
            cartSidebar: document.getElementById('cart-sidebar'),
            closeCart: document.getElementById('close-cart'),
            overlay: document.getElementById('overlay'),
            cartItems: document.getElementById('cart-items'),
            cartCount: document.getElementById('cart-count'),
            cartTotal: document.getElementById('cart-total'),
            emptyCart: document.getElementById('empty-cart'),
            checkoutBtn: document.getElementById('checkout-btn'),
            mobileMenuBtn: document.getElementById('mobile-menu-btn'),
            mobileMenu: document.getElementById('mobile-menu'),
            loadMoreBtn: document.getElementById('load-more'),
            productModal: document.getElementById('product-modal'),
            closeModal: document.getElementById('close-modal'),
            modalOverlay: document.getElementById('modal-overlay'),
            modalContent: document.getElementById('modal-content'),
            navbar: document.getElementById('navbar')
        };

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 加载商品数据
            fetchProducts();
            
            // 从本地存储加载购物车
            loadCartFromStorage();
            
            // 更新购物车UI
            updateCartUI();
            
            // 事件监听
            setupEventListeners();
        });

        // 设置事件监听器
        function setupEventListeners() {
            // 购物车相关
            elements.cartBtn.addEventListener('click', toggleCart);
            elements.closeCart.addEventListener('click', toggleCart);
            elements.overlay.addEventListener('click', toggleCart);
            
            // 移动端菜单
            elements.mobileMenuBtn.addEventListener('click', () => {
                elements.mobileMenu.classList.toggle('hidden');
            });
            
            // 加载更多商品
            elements.loadMoreBtn.addEventListener('click', loadMoreProducts);
            
            // 商品模态框
            elements.closeModal.addEventListener('click', closeProductModal);
            elements.modalOverlay.addEventListener('click', closeProductModal);
            
            // 滚动时导航栏效果
            window.addEventListener('scroll', () => {
                if (window.scrollY > 100) {
                    elements.navbar.classList.add('py-2', 'shadow-lg');
                    elements.navbar.classList.remove('py-3', 'shadow-md');
                } else {
                    elements.navbar.classList.add('py-3', 'shadow-md');
                    elements.navbar.classList.remove('py-2', 'shadow-lg');
                }
            });
        }

        // 获取商品数据
        async function fetchProducts() {
            try {
                // 实际项目中应该从API获取数据
                // const response = await fetch('/api/products');
                // const data = await response.json();
                
                // 模拟数据
                const data = [
                    {
                        id: 1,
                        name: "无线蓝牙耳机",
                        price: 299.99,
                        originalPrice: 399.99,
                        image: "https://picsum.photos/seed/headphones/400/300",
                        category: "电子产品",
                        rating: 4.8,
                        reviews: 124,
                        description: "高品质无线蓝牙耳机，降噪功能，长达24小时续航，支持快速充电，兼容各种设备。"
                    },
                    {
                        id: 2,
                        name: "智能手表",
                        price: 599.99,
                        originalPrice: 699.99,
                        image: "https://picsum.photos/seed/watch/400/300",
                        category: "电子产品",
                        rating: 4.6,
                        reviews: 89,
                        description: "全触摸智能手表，支持心率监测、睡眠分析、运动追踪，防水设计，可连接手机接收通知。"
                    },
                    {
                        id: 3,
                        name: "纯棉T恤",
                        price: 79.99,
                        originalPrice: 99.99,
                        image: "https://picsum.photos/seed/tshirt/400/300",
                        category: "服装",
                        rating: 4.5,
                        reviews: 215,
                        description: "100%纯棉T恤，舒适透气，经典款式，多种颜色可选，适合日常穿着。"
                    },
                    {
                        id: 4,
                        name: "机械键盘",
                        price: 199.99,
                        originalPrice: 249.99,
                        image: "https://picsum.photos/seed/keyboard/400/300",
                        category: "电子产品",
                        rating: 4.9,
                        reviews: 156,
                        description: "RGB背光机械键盘，青轴开关，全键无冲，铝合金面板，持久耐用。"
                    },
                    {
                        id: 5,
                        name: "北欧风格台灯",
                        price: 129.99,
                        originalPrice: 159.99,
                        image: "https://picsum.photos/seed/lamp/400/300",
                        category: "家居",
                        rating: 4.4,
                        reviews: 78,
                        description: "简约北欧风格台灯，可调亮度，LED节能光源，适合卧室和书房使用。"
                    },
                    {
                        id: 6,
                        name: "健身手环",
                        price: 149.99,
                        originalPrice: 179.99,
                        image: "https://picsum.photos/seed/bracelet/400/300",
                        category: "电子产品",
                        rating: 4.3,
                        reviews: 102,
                        description: "多功能健身手环，支持计步、心率监测、睡眠分析，防水设计，长达14天续航。"
                    },
                    {
                        id: 7,
                        name: "商务笔记本",
                        price: 45.99,
                        originalPrice: 59.99,
                        image: "https://picsum.photos/seed/notebook/400/300",
                        category: "图书",
                        rating: 4.7,
                        reviews: 63,
                        description: "高端商务笔记本，优质纸张，耐用封面，适合会议记录和日常笔记。"
                    },
                    {
                        id: 8,
                        name: "无线充电器",
                        price: 89.99,
                        originalPrice: 109.99,
                        image: "https://picsum.photos/seed/charger/400/300",
                        category: "电子产品",
                        rating: 4.2,
                        reviews: 95,
                        description: "15W快速无线充电器，兼容多种设备，智能识别，过充保护，方便实用。"
                    }
                ];
                
                state.products = data;
                renderProducts();
            } catch (error) {
                console.error('Error fetching products:', error);
            }
        }

        // 渲染商品列表
        function renderProducts() {
            const startIndex = (state.currentPage - 1) * state.itemsPerPage;
            const endIndex = startIndex + state.itemsPerPage;
            const productsToRender = state.products.slice(startIndex, endIndex);
            
            productsToRender.forEach(product => {
                const productCard = createProductCard(product);
                elements.productsContainer.appendChild(productCard);
            });
            
            // 如果没有更多商品可加载，隐藏加载更多按钮
            if (endIndex >= state.products.length) {
                elements.loadMoreBtn.style.display = 'none';
            }
        }

        // 创建商品卡片
        function createProductCard(product) {
            const card = document.createElement('div');
            card.className = 'bg-white rounded-lg overflow-hidden shadow-md hover-scale card-shadow';
            card.innerHTML = `
                <div class="relative">
                    <img src="${product.image}" alt="${product.name}" class="w-full h-56 object-cover">
                    <span class="absolute top-2 left-2 bg-accent text-white text-xs px-2 py-1 rounded">
                        ${Math.round((1 - product.price / product.originalPrice) * 100)}% OFF
                    </span>
                    <button class="absolute top-2 right-2 bg-white/80 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-white transition-colors add-to-wishlist">
                        <i class="fa fa-heart-o text-gray-600"></i>
                    </button>
                </div>
                <div class="p-4">
                    <div class="text-sm text-gray-500 mb-1">${product.category}</div>
                    <h3 class="font-medium text-lg mb-2 product-name" data-id="${product.id}">${product.name}</h3>
                    <div class="flex items-center mb-2">
                        <div class="flex text-yellow-400">
                            ${generateRatingStars(product.rating)}
                        </div>
                        <span class="text-sm text-gray-500 ml-2">(${product.reviews})</span>
                    </div>
                    <div class="flex items-center mb-4">
                        <span class="text-primary font-bold text-lg">¥${product.price.toFixed(2)}</span>
                        <span class="text-gray-400 text-sm line-through ml-2">¥${product.originalPrice.toFixed(2)}</span>
                    </div>
                    <button class="w-full bg-primary text-white py-2 rounded hover:bg-primary/90 transition-colors add-to-cart" data-id="${product.id}">
                        加入购物车
                    </button>
                </div>
            `;
            
            // 添加点击事件 - 查看商品详情
            card.querySelector('.product-name').addEventListener('click', () => {
                openProductModal(product);
            });
            
            // 添加点击事件 - 加入购物车
            card.querySelector('.add-to-cart').addEventListener('click', (e) => {
                e.stopPropagation();
                addToCart(product);
            });
            
            // 添加点击事件 - 加入收藏
            card.querySelector('.add-to-wishlist').addEventListener('click', (e) => {
                e.stopPropagation();
                const icon = e.currentTarget.querySelector('i');
                if (icon.classList.contains('fa-heart-o')) {
                    icon.classList.remove('fa-heart-o');
                    icon.classList.add('fa-heart', 'text-red-500');
                } else {
                    icon.classList.remove('fa-heart', 'text-red-500');
                    icon.classList.add('fa-heart-o');
                }
            });
            
            return card;
        }

        // 生成评分星星
        function generateRatingStars(rating) {
            let stars = '';
            const fullStars = Math.floor(rating);
            const hasHalfStar = rating % 1 >= 0.5;
            
            for (let i = 0; i < fullStars; i++) {
                stars += '<i class="fa fa-star"></i>';
            }
            
            if (hasHalfStar) {
                stars += '<i class="fa fa-star-half-o"></i>';
            }
            
            const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
            for (let i = 0; i < emptyStars; i++) {
                stars += '<i class="fa fa-star-o"></i>';
            }
            
            return stars;
        }

        // 加载更多商品
        function loadMoreProducts() {
            state.currentPage++;
            renderProducts();
        }

        // 打开商品详情模态框
        function openProductModal(product) {
            elements.modalContent.innerHTML = `
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <img src="${product.image}" alt="${product.name}" class="w-full h-auto rounded-lg">
                    </div>
                    <div>
                        <div class="text-sm text-gray-500 mb-1">${product.category}</div>
                        <h3 class="text-2xl font-bold mb-2">${product.name}</h3>
                        <div class="flex items-center mb-4">
                            <div class="flex text-yellow-400">
                                ${generateRatingStars(product.rating)}
                            </div>
                            <span class="text-sm text-gray-500 ml-2">${product.rating} (${product.reviews} 评价)</span>
                        </div>
                        <div class="mb-4">
                            <span class="text-primary font-bold text-2xl">¥${product.price.toFixed(2)}</span>
                            <span class="text-gray-400 line-through ml-2">¥${product.originalPrice.toFixed(2)}</span>
                            <span class="ml-2 bg-accent/10 text-accent text-sm px-2 py-1 rounded">
                                省 ¥${(product.originalPrice - product.price).toFixed(2)}
                            </span>
                        </div>
                        <div class="mb-6">
                            <h4 class="font-medium mb-2">商品描述</h4>
                            <p class="text-gray-600">${product.description}</p>
                        </div>
                        <div class="mb-6">
                            <h4 class="font-medium mb-2">数量</h4>
                            <div class="flex items-center w-32 border rounded">
                                <button class="w-10 h-10 flex items-center justify-center border-r" id="decrease-qty">-</button>
                                <input type="number" value="1" min="1" class="w-12 h-10 text-center focus:outline-none" id="product-qty">
                                <button class="w-10 h-10 flex items-center justify-center border-l" id="increase-qty">+</button>
                            </div>
                        </div>
                        <div class="flex flex-col sm:flex-row gap-4">
                            <button class="flex-1 bg-primary text-white font-medium py-3 rounded-lg hover:bg-primary/90 transition-colors" id="modal-add-to-cart" data-id="${product.id}">
                                <i class="fa fa-shopping-cart mr-2"></i> 加入购物车
                            </button>
                            <button class="flex-1 border border-primary text-primary font-medium py-3 rounded-lg hover:bg-primary/5 transition-colors">
                                <i class="fa fa-bolt mr-2"></i> 立即购买
                            </button>
                        </div>
                    </div>
                </div>
            `;
            
            // 数量调整按钮事件
            const qtyInput = document.getElementById('product-qty');
            document.getElementById('increase-qty').addEventListener('click', () => {
                qtyInput.value = parseInt(qtyInput.value) + 1;
            });
            
            document.getElementById('decrease-qty').addEventListener('click', () => {
                if (parseInt(qtyInput.value) > 1) {
                    qtyInput.value = parseInt(qtyInput.value) - 1;
                }
            });
            
            // 加入购物车按钮事件
            document.getElementById('modal-add-to-cart').addEventListener('click', () => {
                const quantity = parseInt(document.getElementById('product-qty').value);
                addToCart(product, quantity);
                closeProductModal();
            });
            
            // 显示模态框
            elements.productModal.classList.remove('hidden');
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        }

        // 关闭商品详情模态框
        function closeProductModal() {
            elements.productModal.classList.add('hidden');
            document.body.style.overflow = ''; // 恢复背景滚动
        }

        // 切换购物车显示/隐藏
        function toggleCart() {
            elements.cartSidebar.classList.toggle('translate-x-full');
            elements.overlay.classList.toggle('hidden');
            document.body.style.overflow = elements.overlay.classList.contains('hidden') ? '' : 'hidden';
        }

        // 添加商品到购物车
        function addToCart(product, quantity = 1) {
            // 检查商品是否已在购物车中
            const existingItemIndex = state.cart.findIndex(item => item.id === product.id);
            
            if (existingItemIndex > -1) {
                // 如果已存在，增加数量
                state.cart[existingItemIndex].quantity += quantity;
            } else {
                // 如果不存在，添加新商品
                state.cart.push({
                    ...product,
                    quantity: quantity
                });
            }
            
            // 保存到本地存储
            saveCartToStorage();
            
            // 更新购物车UI
            updateCartUI();
            
            // 显示添加成功提示
            showAddToCartNotification(product.name);
        }

        // 从购物车移除商品
        function removeFromCart(productId) {
            state.cart = state.cart.filter(item => item.id !== productId);
            
            // 保存到本地存储
            saveCartToStorage();
            
            // 更新购物车UI
            updateCartUI();
        }

        // 更新购物车商品数量
        function updateCartItemQuantity(productId, quantity) {
            if (quantity < 1) return;
            
            const item = state.cart.find(item => item.id === productId);
            if (item) {
                item.quantity = quantity;
                
                // 保存到本地存储
                saveCartToStorage();
                
                // 更新购物车UI
                updateCartUI();
            }
        }

        // 更新购物车UI
        function updateCartUI() {
            // 清空购物车列表
            elements.cartItems.innerHTML = '';
            
            // 显示空购物车状态或购物车商品
            if (state.cart.length === 0) {
                elements.emptyCart.classList.remove('hidden');
                elements.checkoutBtn.disabled = true;
            } else {
                elements.emptyCart.classList.add('hidden');
                elements.checkoutBtn.disabled = false;
                
                // 添加购物车商品
                state.cart.forEach(item => {
                    const cartItem = createCartItemElement(item);
                    elements.cartItems.appendChild(cartItem);
                });
            }
            
            // 更新购物车数量
            const totalItems = state.cart.reduce((total, item) => total + item.quantity, 0);
            elements.cartCount.textContent = totalItems;
            
            // 更新购物车总价
            const totalPrice = state.cart.reduce((total, item) => total + (item.price * item.quantity), 0);
            elements.cartTotal.textContent = `¥${totalPrice.toFixed(2)}`;
        }

        // 创建购物车商品元素
        function createCartItemElement(item) {
            const div = document.createElement('div');
            div.className = 'flex py-4 border-b last:border-0';
            div.innerHTML = `
                <img src="${item.image}" alt="${item.name}" class="w-20 h-20 object-cover rounded mr-4">
                <div class="flex-1">
                    <h4 class="font-medium mb-1">${item.name}</h4>
                    <div class="text-primary font-medium mb-2">¥${item.price.toFixed(2)}</div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center w-24 border rounded">
                            <button class="w-8 h-8 flex items-center justify-center border-r decrease-qty" data-id="${item.id}">-</button>
                            <input type="number" value="${item.quantity}" min="1" class="w-8 h-8 text-center focus:outline-none" data-id="${item.id}">
                            <button class="w-8 h-8 flex items-center justify-center border-l increase-qty" data-id="${item.id}">+</button>
                        </div>
                        <button class="text-gray-500 hover:text-red-500 remove-item" data-id="${item.id}">
                            <i class="fa fa-trash"></i>
                        </button>
                    </div>
                </div>
            `;
            
            // 添加事件监听器
            div.querySelector('.decrease-qty').addEventListener('click', (e) => {
                const newQuantity = item.quantity - 1;
                updateCartItemQuantity(item.id, newQuantity);
            });
            
            div.querySelector('.increase-qty').addEventListener('click', (e) => {
                const newQuantity = item.quantity + 1;
                updateCartItemQuantity(item.id, newQuantity);
            });
            
            div.querySelector('input').addEventListener('change', (e) => {
                const newQuantity = parseInt(e.target.value) || 1;
                updateCartItemQuantity(item.id, newQuantity);
            });
            
            div.querySelector('.remove-item').addEventListener('click', (e) => {
                removeFromCart(item.id);
            });
            
            return div;
        }

        // 显示添加到购物车的通知
        function showAddToCartNotification(productName) {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center';
            notification.innerHTML = `
                <i class="fa fa-check-circle mr-2"></i>
                <span>${productName} 已添加到购物车</span>
            `;
            
            // 添加到页面
            document.body.appendChild(notification);
            
            // 显示通知
            setTimeout(() => {
                notification.classList.remove('translate-y-20', 'opacity-0');
            }, 100);
            
            // 3秒后隐藏通知
            setTimeout(() => {
                notification.classList.add('translate-y-20', 'opacity-0');
                // 动画结束后移除元素
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }

        // 保存购物车到本地存储
        function saveCartToStorage() {
            localStorage.setItem('cart', JSON.stringify(state.cart));
        }

        // 从本地存储加载购物车
        function loadCartFromStorage() {
            const savedCart = localStorage.getItem('cart');
            if (savedCart) {
                state.cart = JSON.parse(savedCart);
            }
        }
    </script>
</body>
</html>
